<!-- 会员管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-date-picker v-model="data.startTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.selectStartDate')" class="iup_width200">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="data.endTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.selectEndDate')" class="iup_width200">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.email" size="medium" class="iup_width200" :placeholder="$t('lan.pleaseEmail')">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">{{$t('lan.query')}}</el-button>
        <el-button type="info" size="medium" @click="reset">{{$t('lan.reset')}}</el-button>
        <!-- <el-button type="primary" size="medium" @click="add('create','')">添加会员</el-button> -->
      </el-form-item>
    </el-form>
    <el-table :data="getList" v-loading="loading" :element-loading-text="$t('lan.dataLoading')" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>{{$t('lan.available')}}</div>
      </div>
      <el-table-column type="index" :label="$t('lan.num')" align="center" width="140"></el-table-column>
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="email" :label="$t('lan.email')" align="center"></el-table-column>
      <el-table-column prop="registerTime" :label="$t('lan.registrationDate')" :formatter="common.formatTime" align="center"></el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>

  </div>
</template>
<script>
export default {
  data () {
    return {
      getList: [],
      data: {
        pageSize: 10,
        currentPage: 1,
        startTime: "",
        endTime: "",
        email: "",
      },
      total: 0,
      loading: false,
      memberList: {},
    };
  },
  methods: {
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getRoleList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getRoleList();
    },
    //查询
    changeInput () {
      this.data.currentPage = 1;
      this.getTime();
    },
    //查询关键字
    search () {
      this.data.currentPage = 1;
      this.getRoleList();
    },
    //重置列表
    reset () {
      Object.assign(this.$data.data, this.$options.data().data); //重置列表
      this.getRoleList();
    },
    //获取列表
    async getRoleList () {
      this.loading = true;
      let url = "/member/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.getList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    },
  },
  mounted () {
    this.getRoleList();
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>